<script setup lang="ts">
import type { LikeConfig, RecommendRows } from '@/types/consult'
import { ref } from 'vue'

const props = defineProps<{
  item: RecommendRows
}>()
const paramsConfig = ref<LikeConfig>({
  type: 'doc',
  id: props.item.id
})
</script>

<template>
  <div class="doctor-item-page">
    <div class="left">
      <van-image width="40" height="40" round :src="item.avatar" />
    </div>
    <div class="info">
      <p class="name">{{ item.name }}</p>
      <p class="location">
        {{ item.hospitalName }} {{ item.depName }}{{ item.gradeName }}
      </p>
      <p class="score">{{ item.score }}分</p>
    </div>
    <div class="right">
      <DP-like
        type="primary"
        round
        :item="item"
        :paramsConfig="paramsConfig"
      ></DP-like>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.doctor-item-page {
  display: flex;
  height: 100px;
  margin: 0 10px;
  align-items: center;
  border-bottom: 1px solid #e3dede;
  .left {
    width: 40px;
  }
  .right {
    width: 70px;
  }
  .info {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 0 5px;
    .location {
      width: 230px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      color: #333;
      font-size: 13px;
      margin: 5px 0;
    }
    .score {
      color: #c3c3c5;
      font-size: 12px;
      font-weight: 700;
    }
  }
}
</style>
